// GraphUtils.js
import { dia, shapes, util } from '@joint/core';
import { getPortsGroup } from './port';

export default class GraphUtils {
    constructor(graph) {
        this.graph = graph;
    }

    createNode(node, x, y, width = 100, height = 40, direction) {
        const rect = new shapes.standard.Rectangle({
            ports: direction ? {
                groups: getPortsGroup(direction)
            } : {},
        });
        rect.position(x, y);
        rect.resize(width, height);
        // 修改主体文字样式
        rect.attr({
            body: {
                fill: "#ffffff",
                stroke: "#000000",
                strokeWidth: 1,
            },
            label: {
                text: node.label,
                fill: "#000000",
                fontSize: 16,
                textWrap: {
                    width: width - 10, // 留出左右边距
                    maxLineCount: 1,
                    ellipsis: true
                }
            },
        });

        if (direction) {
            rect.addPorts([
                {
                    group: 'in',
                    attrs: { label: { text: `Vi ${node.vi}` } }
                },
                {
                    group: 'out',
                    attrs: { label: { text: `Vco ${node.vco}` } }
                },
                {
                    group: 'out',
                    attrs: { label: { text: `Vd ${node.vd}` } }
                },
            ]);
        }

        rect.addTo(this.graph);
        return rect;
    }

    createLeakageNode = (label, vi, x, y) => {
        return new shapes.standard.Rectangle({
            position: { x, y },
            size: { width: 100, height: 50 },
            attrs: {
                body: {
                    fill: '#fff',
                    stroke: '#FF5722',
                    strokeWidth: 1,
                    rx: 5,
                    ry: 5
                },
                label: {
                    text: label,
                    fill: '#333',
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            },
            ports: {
                groups: {
                    in: {
                        position: 'left',
                        attrs: {
                            circle: {
                                strokeWidth: 1,
                                r: 0
                            },
                            text: {
                                text: `Vi ${vi}`,
                                fill: '#333',
                                fontSize: 12,
                                y: -5
                            }
                        }
                    }
                },
                items: [
                    {
                        id: 'in',
                        group: 'in'
                    }
                ]
            }
        });
    }

    createLink(source, target, isLeft = true, vertices = null, portGroup = 'in', routerOptions = {}) {
        const centerX = 560;
        const vertexOffset = 150;
        const vertexX = centerX + (isLeft ? -vertexOffset : vertexOffset);

        const link = new shapes.standard.Link({
            router: routerOptions.router || { name: 'manhattan' },
            connector: {
                name: 'rounded',  // 使用 rounded 连接器来创建圆角
            },
            vertices: vertices || [{
                x: vertexX,
                y: target.attributes.position.y + 25
            }]
        });

        link.attr({
            line: {
                stroke: '#000',
                strokeWidth: 1,
                targetMarker: {
                    type: 'path',
                    d: 'M 10 -5 0 0 10 5 z',
                    fill: '#000'
                }
            }
        });

        const ports = target.getPorts();
        const targetPort = ports.find(port => port.group === portGroup);
        link.source({ id: source.id });
        link.target({ id: target.id, port: targetPort.id });
        link.addTo(this.graph);
        return link;
    }
    // 创建消耗量连接线
    createConsumptionLink(element, consumptionNode, bottomStartY) {
        if (element.attributes.attrs.label.text === '漏损水') return;

        const ports = element.getPorts();
        const outVco = ports.find(port => port.group === 'out');
        const sourcePosition = element.position();
        const isLeft = sourcePosition.x < 560;

        // 安全地获取端口位置
        let portX = sourcePosition.x + (isLeft ? 0 : element.size().width);
        let portY = sourcePosition.y + 25;

        let vertices;
        if (isLeft) {
            vertices = [
                { x: portX - 100, y: portY },
                { x: portX - 100, y: bottomStartY + 60 },
                { x: 710, y: bottomStartY + 60 }
            ];
        } else {
            vertices = [
                { x: portX + 100, y: portY },
                { x: portX + 100, y: bottomStartY + 60 },
                { x: 710, y: bottomStartY + 60 }
            ];
        }

        const consumptionLink = new shapes.standard.Link({
            source: { id: element.id, port: outVco.id },
            target: { id: consumptionNode.id },
            router: { name: 'manhattan' },
            connector: {
                name: 'rounded',  // 使用 rounded 连接器来创建圆角
            },
            vertices: vertices,
            attrs: {
                line: {
                    stroke: '#2196F3',
                    strokeWidth: 1,
                    targetMarker: {
                        type: 'path',
                        d: 'M 10 -5 0 0 10 5 Z'
                    },
                }
            },
        });
        this.graph.addCell(consumptionLink);
        return consumptionLink;
    }

    // 创建排水量连接线
    createDrainageLink(element, drainageNode, bottomStartY) {
        if (element.attributes.attrs.label.text === '漏损水') return;

        const ports = element.getPorts();
        const outVd = ports[2];
        const sourcePosition = element.position();
        const targetPosition = drainageNode.position();
        const isLeft = sourcePosition.x < 560;

        // 安全地获取端口位置
        let portX = sourcePosition.x + (isLeft ? 0 : element.size().width);
        let portY = sourcePosition.y + 38; // 排水端口位置略低一些

        let vertices;
        if (isLeft) {
            vertices = [
                { x: portX - 92, y: portY - 10 },
                { x: portX - 108, y: portY },
                { x: portX - 120, y: portY },
                { x: portX - 120, y: bottomStartY + 80 },
                { x: 410, y: bottomStartY + 80 }
            ];
        } else {
            vertices = [
                { x: portX + 92, y: portY - 7 },
                { x: portX + 108, y: portY },
                { x: portX + 120, y: portY },
                { x: portX + 120, y: bottomStartY + 80 },
                { x: 720, y: bottomStartY + 72 },
                { x: 700, y: bottomStartY + 80 },
                { x: 410, y: bottomStartY + 80 }
            ];
        }

        const drainageLink = new shapes.standard.Link({
            source: { id: element.id, port: outVd.id },
            target: { id: drainageNode.id },
            router: { name: 'manhattan' },
            connector: {
                name: 'rounded',  // 使用 rounded 连接器来创建圆角
            },
            vertices: vertices,
            attrs: {
                line: {
                    stroke: '#FF5722',
                    strokeWidth: 1,
                    targetMarker: {
                        type: 'path',
                        d: 'M 10 -5 0 0 10 5 Z'
                    },
                }
            },
        });
        this.graph.addCell(drainageLink);
        return drainageLink;
    }
}